<template>
  <div class="mobile-plan-view common-mobile-view">
    <plan-query />
    <plan-list />

    <el-button type="primary" :icon="Plus" circle size="large"
               @click="addNewPlanClick" class="add-new" />
  </div>
</template>

<script setup lang="ts">
import PlanList from '@/components/Plan/PlanList.vue'
import PlanQuery from '@/components/Plan/PlanQuery.vue'
import { Plus } from '@element-plus/icons-vue'
import { usePlanStore } from '@/store/plan.ts'
import { useRouter } from 'vue-router'

const planStore = usePlanStore()
const router = useRouter()

const addNewPlanClick = () => {
  planStore.planApiType = 'ADD'
  planStore.currentPlan = planStore.getEmptyPlan()
  router.push({ name: 'PlanDetailId', params: { id: 0 } })
}
</script>

<style lang="scss">
@use "@/styles/home/plan.mobile.module";
</style>
